<template>
	<view class="content">
		<view
			class="header"
			:style="{
				height: headerHeight + 'px',
				paddingTop: menuButtonInfo.top + 'px',
				borderBox: 'box-sizing',
				marginBottom: '10rpx',
				width: headerWidth + 'px',
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'space-between',
				paddingLeft: '10rpx',
			}"
		>
			<view class="header-l">
				<text @click="handlerChangeHos">
					{{ curHos ? curHos : '请选择' }}
				</text>
				<u-icon
					name="arrow-down-fill"
					color="#000"
					size="24"
					style="margin-left: 10rpx"
				></u-icon>
			</view>
			<view class="header-r"> </view>
		</view>
		<u-swiper
			:list="list"
			mode="round"
			height="300"
			@click="handlerSwiperClick"
		>
		</u-swiper>
		<view class="iconList">
			<u-grid :col="iconList.length" :border="false">
				<u-grid-item
					v-for="i in iconList"
					:key="i.code"
					class="iconList-item"
					@click="handlerTopIconClick"
					:index="i.name"
				>
					<image :src="i.src"></image>
					<text>{{ i.name }}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="mycard" v-if="mycard">
			<view class="mycard-left">
				<view class="mycard-left_info">
					<u-icon name="account-fill"></u-icon>
					<text class="name">就诊人：{{ userName }}</text>
				</view>
				<view class="mycard-left_number">就诊卡号: {{ cardNo }}</view>
			</view>
			<view class="mycard-right" @click="handlerShowQr">
				<text class="iconfont shyt-qrcode-solid qr"></text>
			</view>
		</view>
		<view>
			<view class="list">
				<u-grid :col="4" :border="false" v-if="menuList.length > 0">
					<u-grid-item
						v-for="i in menuList"
						:key="i.id"
						class="grid-item"
						@click="handlerGridClick(i)"
						:index="i.menuName"
					>
						<!-- <image :src="i.src"></image> -->
						<text :class="'icon iconfont ' + i.menuIcon"></text>
						<view class="grid-text">{{ i.menuName }}</view>
					</u-grid-item>
				</u-grid>
				<view class="noList" v-if="menuList.length === 0">
					<u-button type="primary" @click="handlerChangeHos"
						>点击选择医院</u-button
					>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<view class="mask" v-show="showQr" @click="closeQrModal"></view>
		<view class="qrModal" v-show="showQr">
			<view class="slot-content">
				<uqrcode ref="uqrcode"></uqrcode>
				<view style="margin-top: 10rpx" class="reload">
					<u-icon
						name="reload"
						style="font-size: 32rpx"
						@click="handlerReloadQrcode"
					></u-icon
					><text @click="handlerReloadQrcode">刷新</text>
				</view>
			</view>
		</view>
		<!-- <view @click="a">测试</view> -->
		<!-- <u-modal
			v-model="showQr"
			:show-confirm-button="false"
			:mask-close-able="true"
			:show-title="false"
			class="qrModal"
		>
			<view class="slot-content">
				<uqrcode ref="uqrcode"></uqrcode>
			</view>
		</u-modal> -->
		<!-- <view @click="a">页面测试</view> -->
		<u-modal
			v-model="show"
			:content="content"
			@confirm="confirm"
			:show-cancel-button="true"
		></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { getOrgMenuList, findBindCard, getBannerList } from '../../http/api'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			mycard: false,
			show: false,
			content: '您还未绑卡',
			showQr: false,
			hasCard: false,
			list: [],
			iconList: [
				{
					code: 'huayan',
					src: '../../static/img/kjc.png',
					name: '检查检验',
				},
				{
					code: 'huayan',
					src: '../../static/img/zxzx.png',
					name: '在线问诊',
				},
			],
			menuList: [],
			menuButtonInfo: {},
			// curHos: '',
			userName: '',
			cardNo: '',
			patientIdcode: '',
			cardNo: '',
			cardName: '',
		}
	},
	computed: {
		...mapState({
			curHos: state => state.curHos,
			userId: state => state.userId,
			orgId: state => state.orgId,
			patientId: state => state.patientId,
		}),
		headerHeight() {
			return this.menuButtonInfo.top + this.menuButtonInfo.height
		},
		headerWidth() {
			return this.menuButtonInfo.right - this.menuButtonInfo.width
		},
	},
	onLoad() {
		this.getButtonInfo()
	},
	onShow() {
		this.userCard()
		this.getOrgMenuList()
		this.getBannerList()
	},
	methods: {
		handlerTopIconClick() {
			this.$refs.uToast.show({
				title: '开发中',
				type: 'info',
			})
		},
		handlerReloadQrcode() {
			this.handlerShowQr()
		},
		handlerSwiperClick(index) {
			// console.log(index, 333)
			let id = this.list[index].articleInformationId
			if (id) {
				this.$router.navigateTo({
					url: `/pages/showArticle/index?id=${id}`,
				})
			}
		},
		// 首页展示卡信息
		dataStorage(dataList) {
			this.userName = dataList.patientName
			this.cardNo = dataList.cardNo
			//就诊人ID
			this.patientIdcode = dataList.patientId
			this.$store.commit('patientIdcode', dataList.patientId)
			this.$store.commit('patientCardId', dataList.cardId)
			this.$store.commit('patientName', dataList.patientName)
			this.$store.commit('patientIdentity', dataList.patientIdcode)
			this.$store.commit('patientTelephone', dataList.patientTelephone)
			this.$store.commit('patientcardNo', dataList.cardNo)
			this.$store.commit('patientGender', dataList.patientGender)
		},
		userCard() {
			if (this.userId && this.orgId) {
				findBindCard({
					userId: this.userId,
					orgId: this.orgId,
					cardType: '1',
				}).then(({ data }) => {
					if (Array.isArray(data) && data.length < 1) {
						this.mycard = false
						this.show = true
					} else {
						// console.log(data, '测试')

						this.mycard = true
						this.show = false
						this.dataStorage(data[0])
						data.map(i => {
							// console.log(i)
							if (i.defultFlag == 0) {
								// dataStorage(i)
								this.dataStorage(i)
							}
						})

						// console.log(data[0])
					}
				})
			}
		},
		confirm() {
			// console.log('确定')
			uni.navigateTo({
				url: '../addPatientID/index',
			})
		},
		getOrgMenuList() {
			if (this.orgId) {
				getOrgMenuList({ formOrgId: this.orgId }).then(({ data, head }) => {
					// console.log(res)
					if (head.code == 200) {
						let arr = data.find(i => i.menuHref == '/index')
						if (arr && arr.children && arr.children.length > 0) {
							this.menuList = arr.children.filter(
								i => i.hideFlag == 0 && i.whetherEnable == 0,
							)
						} else {
							this.menuList = []
						}
					}
				})
			}
		},
		closeQrModal() {
			this.showQr = false
		},
		getBannerList() {
			if (this.orgId) {
				getBannerList({ orgId: this.orgId, releaseFlag: '0' }).then(
					({ head, data }) => {
						// console.log(data)
						if (head.code == 200) {
							data.forEach(i => {
								i.image = i.banneHref
							})
							this.list = data
						}
					},
				)
			}
		},
		handlerShowQr() {
			// setTimeout(() => {
			this.$refs.uqrcode
				.make({
					size: 200,
					text: this.cardNo + '-' + new Date().getTime(),
				})
				.then(res => {
					// 返回的res与uni.canvasToTempFilePath返回一致
					// console.log(res)
				})
			this.showQr = true
			// }, 200)
		},
		handlerChangeHos() {
			uni.navigateTo({ url: '/pages/chooseHospital/index' })
		},
		getButtonInfo() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// console.log(this.menuButtonInfo)
		},
		handlerGridClick(i) {
			console.log(i)
			if (i.menuHref) {
				this.$router.navigateTo({
					url: i.menuHref + `?formId=${i.formId}`,
				})
			} else {
				if (i.formId) {
					this.$router.navigateTo({
						url: `/pages/appFormGenerator/index?id=${i.formId}&name=${i.menuName}`,
					})
				}
			}
		},
	},
}
</script>

<style lang="scss">
.content {
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.6);
		transition: all 0.15s ease-in-out;
		transform: scale(1, 1);
	}
	.qrModal {
		z-index: 11;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 450rpx;
		height: 500rpx;
		// padding: 50rpx;
		.slot-content {
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			background-color: #fff;
			border-radius: 6px;
			.reload {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #5690fb;
			}
		}
	}
	position: relative;
	.header {
		.header-r,
		.header-l {
			display: flex;
			align-items: center;
			height: 100%;
		}
	}
	.u-swiper-indicator {
		bottom: 25rpx !important;
	}
	.iconList {
		margin: 0 40rpx;
		position: relative;
		top: -20rpx;
		// height: 200rpx;
		background: #fff;
		border-radius: 6px;
		box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
		.u-grid-item {
			background: none !important;
		}
		.iconList-item {
			image {
				width: 75rpx;
				height: 75rpx;
			}
			text {
				margin-top: 10rpx;
			}
		}
	}
	.mycard {
		height: 120rpx;
		margin: 0 20rpx;
		background: rgba(158, 202, 231, 0.3);
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		.mycard-left {
			display: flex;
			flex-direction: column;
			// align-items: center;
			justify-content: center;
			padding-left: 20rpx;
			.mycard-left_info {
				color: $uni-color-primary;
				.icon {
					margin-right: 5rpx;
					font-size: 32rpx;
				}
			}
			.mycard-left_number {
				margin-top: 3rpx;
				color: $uni-color-primary;
			}
		}
		.mycard-right {
			display: flex;
			align-items: center;
			padding-right: 16rpx;
			.qr {
				width: 100rpx;
				height: 100rpx;
				font-size: 100rpx !important;
				position: relative;
				top: -4rpx;
				color: #5690fb;
			}
		}
	}
	.noList {
		padding: 40rpx 60rpx;
	}
	.icon {
		font-size: 40rpx;
	}
	.grid-text {
		font-size: 28rpx;
		margin-top: 8rpx;
	}
}
</style>
